/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="app-container1" ref="pattern-container">
    <el-table :data="newPatternList" :max-height="tableHeight" id="footerBtn"
      :row-key="getRowKeys"
      :expand-row-keys="expands"
      @expand-change="expandColumn">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <div class="conditions">
            <span>参考方案:</span>
            <el-select
              v-model="scope.row.patternid"
              size="small"
              :loading="loading"
              @focus="getCurPattern(scope.row.agentid)"
              @change="changeCurPattern(scope.row,$event)">
                <el-option v-for="option in (scope.row.allPatterns)"
                          :key="option.patternid"
                          :label="option.patterndesc"
                          :value="option.patternid">
                  <span>{{ option.patterndesc }}</span>
                </el-option>
            </el-select>
            <span>优化方式:</span>
            <el-select
              v-model="scope.row.fixedtimeplantype"
              size="small"
              @change="onTypeChange(scope.row, $event)">
                <el-option v-for="option in typeOptions"
                          :key="option.label"
                          :label="option.label"
                          :value="option.value">
                </el-option>
            </el-select>
          </div>
          <div v-if="getControlType(scope.row) === 'ring'">
            <div class="components-container board">
              <Kanban
                v-for="n in scope.row.ringCount"
                :key="n"
                class="kanban todo"
                :list="scope.row.rings[n-1]"
                :header-text="'环 '+n"
                :index="scope.$index"
                @fatherMethod="fatherMethod"/>
            </div>
          </div>
          <div v-else>
            <div class="stage-panel-contener">
              <StageKanban
                v-for="(stage, index) in getRowPattern(scope.row).stagesList"
                class="kanban todo stagekanban"
                :key="index"
                :stage="stage"
                :patternList="scope.row.allPatterns"
                :stageInfo="getRowPattern(scope.row).stagesList"
                :isRing="true"
                :options="scope.row.options"
                :coordphaseOption="scope.row.phaseList"
                :rowIndex="scope.$index"
                :subIndex="index"
                @onDeleteStage = "onDeleteStage"
                @stageSplitChange="stageSplitChange"
              />
              <div style="margin-left: 20px">
                <el-button
                  type="primary"
                  @click="addStage(getRowPattern(scope.row).stagesList, getRowPattern(scope.row), scope.$index)"
                  icon="el-icon-plus"
                  circle
                ></el-button>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="No" width="45" minWidth="40">
        <template slot-scope="scope">
          <span>{{scope.$index+1}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('openatc.devicemanager.devicename')" width="150" minWidth="40">
        <template slot-scope="scope">
          <span>{{getDevName(scope.row)}}</span>
        </template>
      </el-table-column>
      <el-table-column property="isValid" :label="$t('openatc.token.isValid')" align="center" width="80" prop="isused">
        <template slot-scope="scope">
          <el-switch
            style="padding-left: 5px;"
            v-model="scope.row.isused"
            active-color="#299BCC">
          </el-switch>
        </template>
      </el-table-column>
      <!-- <el-table-column
        :label="$t('openatc.greenwaveoptimize.pattern')"
        width="120"
        align="center">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.patternid"
            size="small"
            :loading="loading"
            @focus="getCurPattern(scope.row.agentid)"
            @change="changeCurPattern(scope.row,$event)">
              <el-option v-for="option in (scope.row.allPatterns)"
                         :key="option.patternid"
                         :label="option.patterndesc"
                         :value="option.patternid">
                <span>{{ option.patterndesc }}</span>
              </el-option>
          </el-select>
          <span></span>
        </template>
      </el-table-column> -->
      <el-table-column align="center" :label="$t('openatc.greenwaveoptimize.directionOption1')" width="60" prop="forwardphaseDesc" :formatter="formatterForwardphaseDesc">
        <template slot-scope="scope">
          <div class="dirShow">
            <xdrdirselector
                  Width="75PX"
                  Height="75PX"
                  Widths="65PX"
                  Heights="65PX"
                  :Datas="Datas"
                  :Data="Data"
                  :showlist="getShowList(scope.row, 'up')"
                  :roadDirection="roadDirection">
            </xdrdirselector>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('openatc.greenwaveoptimize.directionOption2')" width="60" prop="backphaseDesc" :formatter="formatterBackphaseDesc">
        <template slot-scope="scope">
          <div class="dirShow">
            <xdrdirselector
                  Width="75PX"
                  Height="75PX"
                  Widths="65PX"
                  Heights="65PX"
                  :Datas="Datas"
                  :Data="Data"
                  :showlist="getShowList(scope.row, 'down')"
                  :roadDirection="roadDirection">
            </xdrdirselector>
          </div>
        </template>
      </el-table-column>
      <el-table-column  align="center" :label="$t('openatc.greenwaveoptimize.upspeed')" width="120" prop="offset">
        <template slot-scope="scope">
          <el-input-number :controls="false" :min="0" :step="1" v-model.number="scope.row.upspeed" size="small" style="width:70%;"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column  align="center" :label="$t('openatc.greenwaveoptimize.downspeed')" width="120" prop="offset">
        <template slot-scope="scope">
          <el-input-number :controls="false" :min="0" :step="1" v-model.number="scope.row.downspeed" size="small" style="width:70%;"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column  align="center" :label="$t('openatc.greenwaveoptimize.offsetunit')" width="100" prop="offset">
        <template slot-scope="scope">
          <!-- <el-input size="small" v-model.number="scope.row.offset"></el-input> -->
          <el-input-number :controls="false" :min="0" :step="1" v-model.number="scope.row.offset" size="small" style="width:70%;"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('openatc.greenwaveoptimize.cycleunit')" width="80" prop="cycle">
      </el-table-column>
      <el-table-column align="center" :label="$t('edge.pattern.plan')">
        <template slot-scope="scope">
          <div class="pattern-figure">
            <pattern-list
              v-if="getControlType(scope.row) === 'ring'"
              :patternStatusList="scope.row.rings"
              :cycles="scope.row.cycle"
              :phaseList="scope.row.currPhase"
              :contrloType="getControlType(scope.row)"
            >
            </pattern-list>
            <pattern-list
              v-else
              :patternId="scope.row.patternid"
              :contrloType="getControlType(scope.row)"
              :index="scope.$index"
              :cycleChange="cycleChange"
              :stagesChange="getSelectedPattern(scope.row).stagesList"
              :patternStatusList="getSelectedPattern(scope.row).rings"
              :patternList="scope.row.allPatterns"
              :allPatternList="scope.row.allPatterns"
              :cycles="scope.row.cycle"
              :phaseList="scope.row.currPhase"
              :agentId="scope.row.agentid"
              :showBarrier="false">
            </pattern-list>
            </div>
         </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Kanban from '../../../components/Kanban/index.vue'
import { getPatternList } from '../../../api/route'
import { getMessageByCode } from '../../../utils/responseMessage'
import { getDirName } from '../../../components/SelectCrossPhase/utils.js'
import StageKanban from '../../../components/StageKanban/index.vue'
import { mapState } from 'vuex'
import { getTheme } from '../../../utils/auth'
import xdrdirselector from '../../../components/XRDDirSelector/index.vue'
export default {
  name: 'patterntable',
  components: {
    xdrdirselector,
    StageKanban,
    Kanban
  },
  props: {
    routeDevs: {
      type: Array
    },
    optList: {
      type: Array
    }
  },
  computed: {
    ...mapState({
      roadDirection: state => state.globalParam.roadDirection
    })
  },
  data () {
    return {
      Data: {
        left: '10PX',
        top: '15PX'
      },
      Datas: {
        left: '12PX',
        top: '20PX'
      },
      themeColor: getTheme() === 'light' ? '#606266' : '#fff',
      loading: true,
      tableHeight: screen.height - 480,
      screenHeight: window.innerHeight, // 屏幕高度
      typeOptions: [
        {
          label: this.$t('openatc.greenwaveoptimize.greenOptimize'),
          value: 'flow-split-opt'
        },
        {
          label: this.$t('openatc.greenwaveoptimize.cycleOptimize'),
          value: 'cycle-opt'
        }
      ],
      newPatternList: [],
      expands: [], // 只展开一行放入当前行id
      getRowKeys: row => {
        // 获取当前行id
        return row.agentid // 这里看这一行中需要根据哪个属性值是id
      }
    }
  },
  created () {
  },
  watch: {
    optList: {
      handler: function (val) {
        if (val && val.length > 0) {
          // for () {

          // }
        }
      },
      deep: true
    },
    newPatternList: {
      handler: function (val) {
        this.$emit('onNewPatternListChange', val)
      },
      deep: true
    }
  },
  methods: {
    getShowList (row, type = 'up') {
      let res = []
      let phaseId = row.forwardphaseid
      if (type && type !== 'up') {
        phaseId = row.backphaseid
      }
      let phase = row.phaseList.find(item => item.id === phaseId)
      if (phase) {
        console.log(phase)
        let direction = phase.direction
        let dirList = direction.map(item => {
          let dir = {
            id: item,
            color: this.themeColor
          }
          return dir
        })
        res = dirList
      }
      return res
    },
    expandColumn (row, expandedRows) {
      // 每次只展开一行
      let that = this
      if (expandedRows.length) {
        that.expands = []
        if (row) {
          that.expands.push(row.agentid)
        }
      } else {
        that.expands = []
      }
    },
    getRowPattern (row) {
      let pattern = row.allPatterns.find(item => item.id === row.patternid)
      return pattern
    },
    getDevName (row) {
      let res = row.name ? row.name : row.agentid
      if (this.routeDevs) {
        let dev = this.routeDevs.find(item => item.agentid === row.agentid)
        res = dev ? dev.name : res
      }
      return res
    },
    onPatternTable (routeData, patternList, phaseList) {
      this.newPatternList = []
      if (patternList.length === 0) {
        // this.$message.error('方案为空！')
        return
      }
      if (phaseList.length === 0) {
        // this.$message.error('相位为空！')
        return
      }
      // this.routeData = routeData
      // this.patternList = patternList
      // this.phaseList = phaseList
      this.handlePatternList(routeData, patternList, phaseList)
    },
    handlePatternList (routeData, patternList, phaseList) {
      let devs = routeData.devs
      for (let pattern of patternList) {
        let obj = {}
        let id = pattern.agentid
        obj.agentid = id
        let count = [] // 计算相位有几个环
        if (pattern.feature !== undefined && pattern.feature.patternList.length !== 0) {
          let dev = devs.filter(ist => ist.agentid === id)[0]
          let currPatternList = []
          if (dev && dev.feature && dev.feature.patternList && dev.feature.patternList.length > 0) {
            currPatternList = dev.feature.patternList
          } else {
            currPatternList = pattern.feature.patternList
          }
          let patternId = dev.patternid ? dev.patternid : 1
          let currPattern
          if (Array.isArray(currPatternList)) {
            currPattern = currPatternList.filter(cpl => cpl.id === patternId)[0]
            if (!currPattern) {
              currPattern = currPatternList[0]
            }
          } else {
            currPattern = currPatternList
          }
          // let currPattern = currPatternList.filter(cpl => cpl.id === patternId)[0]
          if (currPattern.desc === '') {
            obj.desc = this.$t('openatc.greenwaveoptimize.pattern') + currPattern.id
          } else {
            obj.desc = currPattern.desc
          }
          obj = {...obj, ...dev}
          // let fixedtimeplanList =
          if (!obj.fixedtimeplantype) {
            obj.fixedtimeplantype = 'cycle-opt'
          }
          obj.id = currPattern.id
          obj.offset = currPattern.offset
          obj.cycle = currPattern.cycle
          obj.patternId = currPattern.id
          obj.patternid = currPattern.id
          obj.patternDesc = currPattern.desc === '' ? `${this.$t('openatc.greenwaveoptimize.pattern')}${currPattern.id}` : currPattern.desc
          obj.allPatterns = currPatternList.map(ele => {
            let patterndesc = ele.desc === '' ? `${this.$t('openatc.greenwaveoptimize.pattern')}${currPattern.id}` : ele.desc
            return {
              patternid: ele.id,
              patterndes: ele.desc,
              patterndesc: patterndesc,
              ...ele
            }
          })
          let rings = currPattern.rings
          let currPhase = phaseList.filter(phl => phl.agentid === id)[0].feature.phaseList
          obj.currPhase = currPhase
          obj.phaseList = currPhase
          if (currPattern.contrloType !== 'stage') {
            // 计算有几个环
            for (let ring of rings) {
              if (ring.length === 0) continue
              for (let rr of ring) {
                rr.flowperhour = rr.flowperhour || 0
                rr.saturation = rr.saturation || 1700
                rr.desc = []
                let direction = currPhase.filter(curp => curp.id === rr.id)[0].direction // 相位方向集合
                let phaseRing = currPhase.filter(curp => curp.id === rr.id)[0].ring
                count.push(phaseRing)
                for (let dir of direction) {
                  let obj = {}
                  obj.id = dir
                  rr.desc.push(obj)
                }
              }
            }
            obj.rings = rings
          }
          obj.stagesList = currPattern.stagesList
        }
        let ringCount = Array.from(new Set(count)) // 去除数组重复的元素
        ringCount = ringCount.sort(this.sortNumbers) // 把数组中的值按照从小到大的顺序重新排序
        obj.ringCount = ringCount
        this.newPatternList.push(obj)
      }
    },
    sortNumbers (a, b) {
      return a - b
    },
    fatherMethod (val) {
      let index = val.index
      let cycle = val.cycle
      this.newPatternList[index].cycle = cycle
      this.newPatternList[index].phases = val.phases
    },
    onTypeChange (row, val) {
      row.fixedtimeplantype = val
    },
    changeCurPattern (row, curPatternid) {
      // 修改当前方案（allPatterns： 所有可选项）
      const data = {
        agentid: row.agentid,
        patternid: curPatternid,
        patterndes: row.allPatterns.filter(ele => ele.patternid === curPatternid)[0].patterndes,
        allPatterns: row.allPatterns
      }
      row.desc = data.patternDesc
      row.patternId = data.patternid
      row.patternid = data.patternid
      row.patterndes = data.patterndes
      row.allPatterns = data.allPatterns
      row.patternid = data.patternid
      let selectPattern = row.allPatterns.filter(item => item.patternid === row.patternid)[0]
      let res = this.getRings(selectPattern.rings, row.phaseList)
      row.rings = res.rings
      row.ringCount = res.ringCount
      // row.rings = selectPattern.rings
      row.cycle = selectPattern.cycle
      row.offset = selectPattern.offset
      row.currPhase = row.phaseList
    },
    getRings (ringsList, phaseList) {
      let res = {}
      let rings = JSON.parse(JSON.stringify(ringsList))
      let count = []
      // 计算有几个环
      for (let ring of rings) {
        if (ring.length === 0) continue
        for (let rr of ring) {
          rr.desc = []
          let direction = phaseList.filter(curp => curp.id === rr.id)[0].direction // 相位方向集合
          let phaseRing = phaseList.filter(curp => curp.id === rr.id)[0].ring
          count.push(phaseRing)
          for (let dir of direction) {
            let obj = {}
            obj.id = dir
            rr.desc.push(obj)
          }
        }
      }
      let ringCount = Array.from(new Set(count)) // 去除数组重复的元素
      ringCount = ringCount.sort(this.sortNumbers) // 把数组中的值按照从小到大的顺序重新排序
      res = {
        rings: rings,
        ringCount: ringCount
      }
      return res
    },
    getDirectionDesc (row, bizType) {
      let res = ''
      let desc = ''
      let phseId = -1
      let directions = []
      if (bizType === 'up') {
        desc = row.forwardphaseDesc
        phseId = row.forwardphaseid
        directions = row.forwardphasedirection
      } else {
        desc = row.backphaseDesc
        phseId = row.backphaseid
        directions = row.backphasedirection
      }
      if (!phseId) {
        return res
      }
      if (!directions) {
        directions = []
      }
      let list = directions.map(id => {
        return {
          id: id
        }
      })
      let dirNames = getDirName(list)
      if (!dirNames) {
        dirNames = []
      }
      let _this = this
      let names = dirNames.map(item => {
        let name = _this.$t(item)
        return name
      })
      desc = names.join(',')
      res = this.$t('openatc.greenwaveoptimize.phase') + phseId + ' ' + desc
      return res
    },
    formatterForwardphaseDesc (row, column) {
      let bizType = 'up'
      let res = this.getDirectionDesc(row, bizType)
      return res
    },
    formatterBackphaseDesc (row, column) {
      let bizType = 'down'
      let res = this.getDirectionDesc(row, bizType)
      return res
    },
    onDeleteStage (rowIndex, stageInfo, maxCycle) {
      let row = this.newPatternList[rowIndex]
      row.cycle = maxCycle
      let pattern = row.allPatterns.find(item => item.id === row.patternid)
      pattern.stagesList = stageInfo
      pattern.cycle = maxCycle
      row.feature.patternList = row.allPatterns
    },
    stageSplitChange (diff, rowIndex, subIndex, stage) {
      let row = this.newPatternList[rowIndex]
      let pattern = row.allPatterns.find(item => item.id === row.patternid)
      let stageList = pattern.stagesList
      stageList[subIndex] = stage
      let cycle = 0
      for (let rings of stageList) {
        // if (subIndex === rings.key) {
        rings.stageSplit = (rings.green ? rings.green : 0) + (rings.yellow ? rings.yellow : 0) + (rings.red ? rings.red : 0)
        cycle = cycle + rings.stageSplit
        // }
      }
      pattern.cycle = cycle
      // let rings = this.getRingsFromStageList(stageList)
      // pattern.rings = rings
      pattern.contrloType = 'stage'
      this.newPatternList[rowIndex].cycle = cycle
      row.feature.patternList = row.allPatterns
    },
    getRingsFromStageList (stageList) {
      let rings = []
      let ring = []
      if (stageList && stageList.length > 0) {
        ring = stageList.map((item, index) => {
          let r = {
            id: index + 1,
            value: item.stageSplit
          }
          return r
        })
      }
      rings.push(ring)
      return rings
    },
    addStage (stagesList, pattern, rowIndex) {
      this.isChange = false
      if (stagesList.length > 15) {
        this.$message.error(
          this.$t('edge.pattern.mostlist')
        )
        return
      }
      stagesList.push(
        {
          key: stagesList.length,
          stageNo: 0,
          green: 25,
          yellow: 3,
          red: 2,
          phases: [],
          stageSplit: 30
        }
      )
      this.getStageCycle(stagesList, rowIndex)
    },
    getStageCycle (stagesList, rowIndex) {
      let row = this.newPatternList[rowIndex]
      let pattern = row.allPatterns.find(item => item.id === row.patternid)
      // let stageList = pattern.stagesList
      pattern.stagesList = stagesList
      // this.setStageList(stagesList, pattern.id)
      let maxCycle = this.changeStageCycle(pattern)
      pattern.cycle = maxCycle
      pattern.contrloType = 'stage'
      row.cycle = maxCycle
      row.feature.patternList = row.allPatterns
    },
    setStageList (stageChange, id, pattern) {
      // let patternList = patternList
      let stagesList = []
      for (let i = 0; i < stageChange.length; i++) {
        let stage = JSON.parse(JSON.stringify(stageChange[i]))
        // let stageItem = this.getStageItems(stage.phases, i, stageChange)
        stagesList.push(JSON.parse(JSON.stringify(stage)))
      }
      stagesList.forEach((stage) => {
        delete stage.split
      })
      // patternList.map(item => { // 添加特征参数stage
      //   if (item.id === id) {
      //     if (this.isRing) {
      //       item.contrloType = 'stage'
      //     } else {
      //       item.contrloType = 'ring'
      //     }
      //     item.stagesList = JSON.parse(JSON.stringify(stagesList.filter(item => item.stageSplit)))
      //   }
      // })
      pattern.stagesList = stagesList
    },
    getStageItems (stageArr, i, stageChange) {
      let res = {
        key: i,
        split: this.narr[i], // 阶段绿性比
        phases: stageArr,
        delaystart: 0,
        advanceend: 0
      }
      for (let j = 0; j < stageChange.length; j++) {
        if (i === j) {
          res.green = stageChange[j].green ? stageChange[j].green : stageChange[j].green === 0 ? 0 : 25
          res.yellow = stageChange[j].yellow ? stageChange[j].yellow : stageChange[j].yellow === 0 ? 0 : 3
          res.red = stageChange[j].red ? stageChange[j].red : stageChange[j].red === 0 ? 0 : 2
          res.phases = stageChange[j].phases ? stageChange[j].phases : stageArr
          res.stageNo = stageChange[j].stageNo ? stageChange[j].stageNo : 0
          // res.stageSplit = stageChange[j].split ? stageChange[j].split : 30
          if (this.isChange && stageChange[j].split) {
            res.stageSplit = stageChange[j].split
          } else if (stageChange[j].stageSplit) {
            res.stageSplit = stageChange[j].stageSplit
          } else {
            res.stageSplit = 0
          }
        }
      }
      return res
    },
    changeStageCycle (pattern) {
      let rings = pattern.stagesList
      let stageCycleList = rings.map(item => {
        if (item.stageSplit) {
          return item.stageSplit
        } else {
          return 0
        }
      })
      let maxCycle = stageCycleList.reduce((a, b) => {
        return a + b
      }, 0)
      return maxCycle
    },
    getControlType (row) {
      let contrloType = 'ring'
      let allPatternList = row.feature && row.feature.patternList ? row.feature.patternList : row.allPatterns
      if (
        !allPatternList[0].contrloType &&
        allPatternList[0].rings.length > 0
      ) {
        contrloType = 'ring'
      } else if (
        !allPatternList[0].contrloType &&
        allPatternList[0].rings.length === 0
      ) {
        contrloType = 'stage'
      } else {
        contrloType = allPatternList[0].contrloType
      }
      let res = contrloType
      return res
    },
    getSelectedPattern (row) {
      let res = []
      let patternList = row.feature && row.feature.patternList ? row.feature.patternList : row.allPatterns
      let pattern = patternList.find(item => item.id === row.patternid)
      if (pattern) {
        res = pattern
      }
      return res
    },
    getCurPattern (agentid) {
      // 获取当前设备所有可选方案
      this.loading = true
      let _this = this
      // let patterns = this.newPatternList.filter(item => item.agentid === agentid)[0]
      // if (patterns.allPatterns && patterns.allPatterns.length > 0) {
      //   patterns.allPatterns = patterns.allPatterns
      //   return false
      // }
      getPatternList(agentid).then(res => {
        this.loading = false
        if (!res.data.success) {
          if (res.data.code === '4003') {
            this.$message.error(this.$t('openatc.common.devicenotonline'))
            return
          }
          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
          return
        }
        _this.newPatternList.forEach(ele => {
          if (ele.agentid === agentid) {
            ele.allPatterns = res.data.data.data.patternList.map(ele => {
              return {
                ...ele,
                patternid: ele.id,
                patterndes: ele.desc,
                patterndesc: ele.desc === '' ? `${_this.$t('openatc.greenwaveoptimize.pattern')}${ele.id}` : ele.desc
              }
            })
          }
        })
      })
    }
  }
}
</script>

<style lang="scss">
  .conditions {
    width: 100%;
    height: auto;
    // border: 1px solid red;
    display: flex;
    justify-content: flex-start;
    margin-left: 15PX;
    margin-bottom: 10PX;
    align-items: center;
    gap: 15PX;
  }
  .board {
    width: 100%;
    margin-left: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 15PX;
    gap: 15PX;
  }
  // .kanban {
  //   &.todo {
  //     .board-column-header {
  //       background: $--color-primary;
  //     }
  //   }
  // }
.stage-panel-contener {
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  align-items: center;
  .stagekanban {
    width: 264PX;
    margin-left: 10PX !important;
  }
}
.dirShow {
  position: relative;
  width: 100%;
  height: 75PX;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
